<script lang="ts" setup>
import { computed, reactive, toRefs, ref, watchEffect } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import menuNavItem from './menuNavItem.vue';
import { useUserStore } from '@/store';

const userStore = useUserStore();
const { adminInfo } = toRefs(userStore);

const router = useRouter();
const route = useRoute();
const menuList = computed(() => {
	const list = router.options.routes.filter((it) => it.name === 'Index')[0].children || [];
	return list.filter((e) => {
		const adminTypeList: Array<number> = e.meta && Array.isArray(e.meta.adminType) ? e.meta.adminType : [];
		return (
			!adminTypeList.length ||
			(adminTypeList.length && adminTypeList.includes(Number(adminInfo.value?.adminType)))
		);
	});
});
let openKeys: any = ref([]);

watchEffect(() => {
	if (route.meta && route.meta.parentName) {
		openKeys.value = [route.meta.parentName];
	} else {
		openKeys.value = [];
	}
});

const selectedKeys = computed(() => {
	return [route.name];
});
function menuItemClick(key: string) {
	console.log(111);
	router.push({ name: key });
}
function subMenuClick(name: string) {
	const Index = openKeys.value.findIndex((it: string) => {
		return it === name;
	});
	if (Index >= 0) {
		openKeys.value.splice(Index, 1);
	} else {
		openKeys.value.push(name);
	}
}
</script>

<template>
	<a-menu
		:style="{ width: '220px', height: '100%' }"
		breakpoint="xl"
		:selected-keys="selectedKeys"
		:open-keys="openKeys"
		@menu-item-click="menuItemClick"
		@sub-menu-click="subMenuClick"
	>
		<menuNavItem :nav-list="menuList" />
	</a-menu>
</template>
